<!--
  @Description: index
  @Author: Mr.Li
  @E-mail: 
  @Date: 12/1/2024 15:26
-->
<template>
  <div>
    <div class="canvas-editor" ref="container"></div>
  </div>
</template>

<script setup>
import Editor from "@hufe921/canvas-editor";
import docxPlugin from "@hufe921/canvas-editor-plugin-docx";
import axios from "axios";

const container = ref();
let editor = null;

/**
 * 获取word文档
 */
async function getDoc() {
  const res = await axios({
    url: "http://localhost:8000/doc.docx",
    method: "get",
    responseType: "blob",
  });
  const arrayBuffer = await blobToBuffer(res.data);
  console.log(arrayBuffer);
  initWord(arrayBuffer);
}

getDoc();

function blobToBuffer(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (event) {
      const arrayBuffer = event.target.result;
      resolve(arrayBuffer);
    };
    reader.readAsArrayBuffer(blob);
  });
}

function initWord(buffer) {
  console.log("123");
  editor = new Editor(
    container.value,
    {
      header: [
        {
          value: "Header",
          // rowFlex: RowFlex.CENTER,
        },
      ],
      main: [
        {
          value: "Hello World",
        },
      ],
      footer: [
        {
          value: "canvas-editor",
          size: 12,
        },
      ],
    },
    {},
  );
  editor.use(docxPlugin);
  editor.command.executeImportDocx({
    arrayBuffer: buffer,
  });
}

onUnmounted(() => {
  editor.destroy();
});
</script>

<style scoped lang="scss"></style>
